<template>
  <el-card style="max-width: 99%">
    <template #header>
      <div class="card-header">
        <span>首页</span>
      </div>
    </template>
    <div style="display: flex;justify-content: center">
      <div ref="chartDom" style="width: 500px; height: 400px;margin-top: 60px"></div>
      <div ref="zz" style="width: 500px; height: 400px;margin-top: 40px"></div>
    </div>

  </el-card>
</template>

<script setup>
import {count1,count2,count3,count4} from "@/api/vue3";
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const pub= ref();//酒店浏览量
const jd= ref();//景点浏览量
const pub2= ref();//酒店收藏量
const jd2= ref();//景点收藏量

const aa= async () => {
  const res = await count1();
  pub.value = res.data.data
}

const bb= async () => {
  const res = await count2();
  jd.value = res.data.data
}
const cc= async () => {
  const res = await count3();
  pub2.value = res.data.data
}
const dd= async () => {
  const res = await count4();
  jd2.value = res.data.data
}


const chartDom = ref(null); // 绑定 DOM 元素
let myChart = null; // 图表实例

const zz = ref(null); // 绑定 DOM 元素
let myChart2 = null; // 图表实例

onMounted(async () => {
  await aa()
  await bb()
  await cc()
  await dd()

  // 通过 ref 获取 DOM
  const dom = chartDom.value;
  if (!dom) {
    console.error('DOM 元素未找到');
    return;
  }

  const dom1=zz.value;
  if (!dom1) {
    console.error('DOM 元素未找到');
    return;
  }

  // 初始化图表
  myChart = echarts.init(dom);

  myChart2 = echarts.init(dom1);

  // 配置项
  const option = {
    color: [
      '#AAD9B5',
      '#FAD17D',
    ],

    title: {
      text: '网页浏览量',
      left: 'center'
    },
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [{
      name: '浏览量',
      type: 'pie',
      radius: '50%',
      data: [
        { value: pub.value, name: '酒店' },
        { value: jd.value, name: '景点' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };

  const option2 = {
    color: [
      '#B4D0E7',
      '#C8E6E5'
    ],
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '收藏量',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: pub2.value, name: '酒店' },
          { value: jd2.value, name: '景点' }
        ]
      }
    ]
  }
  // 使用配置项和数据显示图表
  myChart2.setOption(option2)

  myChart.setOption(option);
});

</script>

<style scoped>
.el-card {
  width: 100%;
  height: 600px;
  background-color: white;
  margin-top: 20px;
  border-radius: 30px;
}
</style>